<template>
  <div style="color: crimson;font-size: 40px;background-color: pink;font-weight: bold;font-style: italic;">今天学习vue</div>
  <div>
    {{username}}{{age}}
  </div>

  <div>{{person.username}}的密码{{person.password}}</div>
<div @click="clickBtn">{{person.username}}的密码{{person.password}}</div>
<button @click="changeSchool">点击修改毕业状态{{person.isSchool}}</button>

<div>
  <select v-model="result" style="width: 300px">
    <option>{{opitions[0].name}}</option>
    <option>{{opitions[1].name}}</option>
    <option>{{opitions[2].name}}</option>
  </select>

  <div>选择的结果{{ result }}</div>

  <div>
    <input v-model="result"/>
  </div>

  <div>
    <span style="font-size: 30px" v-if="person.isSchool">
      {{ person.username }}还没有毕业
    </span>
    <span v-else>
      {{ person.username }}已经毕业了
    </span>
  </div>

  <button v-on:click="changeSchool">修改毕业状态</button>

  <img :src="person.headImage" :style="person.ImageStyle">

  <div>
    <el-button type="success">登录成功</el-button>
  </div>
  <el-icon>
    <UserFilled />
  </el-icon>

</div>
  <div>
    <el-input placeholder="请输入账号" v-model="userInfo" clearable></el-input>
    <el-input placeholder="请输入密码" show-password v-model="userInfo"></el-input>
    <el-input placeholder="个人信息" type="textarea" v-model="userInfo"></el-input>
  </div>

  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409efc" class="no-inherit">
    <Share />
  </el-icon>

</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {UserFilled} from "@element-plus/icons";

const username=ref( "等等")
const age=ref(21)
const test=ref(false)

const person=reactive({
  username:"零零",
  password:"12233",
  isSchool:false,
  headImage: "https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
  ImageStyle:{
    width: "100px",
    aspectRatio: 1
  }

})
const clickBtn = () => {
  alert("点击了" + username)
  console.log("点击了")
}

const changeSchool = () => {
  person.isSchool=!person.isSchool;
}

const opitions=reactive([
    {name:"苹果"},
    {name:"梨子"},
    {name:"橘子"}
])

let result=ref("")

onMounted(()=>{
  alert("页面加载完毕了！")
})
</script>
